<template>
  <div class="home">
    <!-- 顶部的head -->
    <page-head />
    <!-- 左侧组件列表 -->
    <page-left />
    <!-- 中间内容区域 -->
    <page-view />
    <!-- 右侧组件编辑区域 -->
    <page-right />
    <upload-img :dialog-image-visible.sync="dialogImageVisible" @upLoadImgSuccess="upLoadImgSuccess" />
  </div>
</template>

<script>
import PageLeft from './components/PageLeft.vue'
import PageView from './components/PageView.vue'
import PageHead from './components/PageHead.vue'
import PageRight from './components/PageRight.vue'
// 公共上传
import UploadImg from '@/components/BasicConfig/UpLoadImg.vue'
import { getCmsPageById } from '@/api/activity'
import { createRandomId } from '@/utils'

export default {
  components: {
    PageLeft,
    PageView,
    PageHead,
    PageRight,
    UploadImg
  },
  data() {
    return {

    }
  },
  computed: {
    dialogImageVisible: {
      get() {
        return this.$store.state.dialogImageVisible
      },
      set(val) {
        this.$store.commit('SET_UPIMAGE_VISIBLE', val)
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // 获取详情
      const { id } = this.$route.query
      if (id) {
        // 编辑
        getCmsPageById(id).then(({ data }) => {
          this.postDataToH5(data)
        })
      }
    },
    // 处理后端返回的数据
    postDataToH5(data) {
      if (data && data.componentList) {
        data.componentList.forEach(item => {
          if (item.data.validTime && typeof item.data.validTime === 'string') {
            item.data.validTime = JSON.parse(item.data.validTime)
          }
          if (!item.id) {
            const id = createRandomId()
            item.id = item.data.component + '-' + id
          }
        })
      }
      this.$store.commit('UPDATE_COMPONENT', { data })
      this.$store.commit('VIEW_UPDATE')
    },
    upLoadImgSuccess(imageUrl) {
      if (this.$store.state.upLoadImgSuccess) {
        this.$store.state.upLoadImgSuccess(imageUrl)
      }
    }
  }
}
</script>
